<template>
  <div
    class="vaw-layout-container"
    :class="[getLayoutState.device === 'mobile' && 'is-mobile']"
  >
    <transition name="header">
      <ly-v-a-w-avatar v-if="isShowHeader" />
    </transition>
    <template v-if="isShowHeader">
      <ly-sidebar
        ref="sideBar"
        :show-logo="!isShowHeader"
        class="layout-mode-ttb"
      />

      <ly-main-layout :show-nav-bar="!isShowHeader" />
    </template>
    <template v-else-if="getLayoutState.layoutMode === 'lcr'">
      <ly-tab-split-side-bar />
      <ly-main-layout />
    </template>
    <template v-else>
      <ly-sidebar ref="sideBar" />
      <ly-main-layout />
    </template>
    <div
      v-if="getLayoutState.device === 'mobile'"
      class="mobile-shadow"
      :class="[getLayoutState.isCollapse ? 'close-shadow' : 'show-shadow']"
      @click="closeMenu"
    ></div>
    <ly-setting-info ref="settingInfo" />
    <ly-setting @open-drawer="openSettingDrawer" @open-source="openSource" />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import LyVAWAvatar from "@/layouts/components/LyVAWAvatar.vue";
import LySidebar from "@/layouts/components/sidebar/LySidebar.vue";
import LyMainLayout from "@/layouts/components/LyMainLayout.vue";
import LyTabbar from "@/layouts/components/LyTabbar.vue";
import LyTabSplitSideBar from "@/layouts/components/sidebar/LyTabSplitSideBar.vue";
import LySettingInfo from "@/layouts/components/setting/LySettingInfo.vue";
import LySetting from "@/layouts/components/setting/LySetting.vue";
import { ILayoutState } from "@/@types/store";
import { LayoutStoreModule } from "@/store/modules/LayoutStore";

@Component({
  name: "LayoutView",
  components: {
    LySetting,
    LySettingInfo,
    LyTabSplitSideBar,
    LyTabbar,
    LyMainLayout,
    LySidebar,
    LyVAWAvatar,
  },
})
export default class LayoutView extends Vue {
  //#region vue prop =================================

  //#endregion

  //#region vue data =================================

  //#endregion
  //#region computed getter =================================
  private get getLayoutState(): ILayoutState {
    return LayoutStoreModule;
  }
  private get isShowHeader() {
    return LayoutStoreModule.isShowHeader;
  }
  //#endregion
  //#region vue life =================================
  created() {
    console.log("LayoutView " + "created");
  }

  mounted() {
    console.log("LayoutView " + "mounted");
  }

  beforeDestroy() {
    console.log("LayoutView " + "beforeDestroy");
  }

  //#endregion
  //#region comp getter =================================

  //#endregion
  //#region server data =================================

  //#endregion
  //#region components Func =================================
  private openSettingDrawer() {
    // this.$refs.settingInfo?.show();
  }
  openSource() {
    // this.$refs.myNotice?.show();
  }
  handleScreenResize() {
    const width = document.body.clientWidth;
    if (width <= 768) {
      LayoutStoreModule.changeDevice("mobile");
      LayoutStoreModule.toggleCollapse(true);
    } else if (width < 992 && width > 768) {
      LayoutStoreModule.changeDevice("pad");
      LayoutStoreModule.toggleCollapse(true);
    } else if (width < 1200 && width >= 992) {
      LayoutStoreModule.changeDevice("pc");
      LayoutStoreModule.toggleCollapse(false);
    } else {
      LayoutStoreModule.changeDevice("pc");
      LayoutStoreModule.toggleCollapse(false);
    }
  }
  closeMenu() {
    LayoutStoreModule.toggleCollapse(true);
  }
  //#endregion
  //#region Public Func =================================

  //#endregion
  //#region view layout =================================

  //#endregion
}
</script>
<style scoped lang="scss">
@import "../assets/styles/variables.scss";
.vaw-layout-container {
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  .mobile-shadow {
    display: none;
  }
  .layout-mode-ttb {
    margin-top: $logoHeight;
    transition: all $transitionTime;
  }
}
.is-mobile {
  .mobile-shadow {
    background-color: #000000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 997;
  }
  .close-shadow {
    display: none;
  }
  .show-shadow {
    display: block;
    opacity: 0.5;
    transition: all $transitionTime;
  }
}
</style>

<style lang="scss" scoped></style>
